<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue";
import {userCountAllService} from "@/api/user.js";
import {titleCountAllService} from "@/api/title.js";
import {trainCountAllService} from "@/api/train.js";
import {certificateCountAllService} from "@/api/certificate.js";

onMounted(() => {
  initData()
})

const initData = async() => {
  const userNumbersRes = await userCountAllService()
  const titleNumbersRes = await titleCountAllService()
  const trainNumbersRes = await trainCountAllService()
  const certificateNumbersRes = await certificateCountAllService()
  const userNumbers = userNumbersRes.data.data
  const titleNumbers = titleNumbersRes.data.data
  const trainNumbers = trainNumbersRes.data.data
  const certificateNumbers = certificateNumbersRes.data.data
  //根据最大数据动态刷新y轴最大值
  const maxNum = Math.max(userNumbers,titleNumbers,trainNumbers,certificateNumbers)

  var chartDom = document.getElementById('dataEcharts');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['队员人数', '题目数量', '训练次数', '证书总量'],
      axisLabel: {
        fontSize: 30 // 设置 x 轴标签的文字大小为 14
      },
    },
    yAxis: {
      type: 'value',
      max: maxNum,
      axisLabel: {
        fontSize: 20 // 设置 x 轴标签的文字大小为 14
      },
      splitLine: {
        lineStyle: {
          color: '#b0b0b0', // 设置辅助线的颜色为灰色
          width: 2 // 设置辅助线的粗细为 2
        }
      }
    },
    tooltip: {},
    series: [
      {
        data: [
          userNumbers,
          {
            value: titleNumbers,
            itemStyle: {
              color: '#a90000'
            }
          },
          {
            value: trainNumbers,
            itemStyle: {
              color: '#e7934d'
            }
          },
          {
            value: certificateNumbers,
            itemStyle: {
              color: '#a5e527'
            }
          },
        ],
        type: 'bar'
      }
    ]
  };

  option && myChart.setOption(option);
}



</script>

<template>
  <div id="dataEcharts"></div>
</template>

<style scoped>

</style>
